<template>
  <div class="search-result">
    <h3 class="title">找到 {{ count }} 首单曲</h3>
    <ul class="sorts">
      <li class="sort active"><a href="#"></a>单曲</li>
      <li class="sort"><a href="#"></a>歌手</li>
      <li class="sort"><a href="#"></a>专辑</li>
      <li class="sort"><a href="#"></a>视频</li>
      <li class="sort"><a href="#"></a>歌单</li>
      <li class="sort"><a href="#"></a>歌词</li>
      <li class="sort"><a href="#"></a>主播电台</li>
    </ul>
    <SongItem :result='result'></SongItem>
  </div>
</template>

<script>
import axios from "@/utils/axios";
import SongItem from "./SongItem";
export default {
  name: "SearchResult",
  data() {
    return {
      count: 0,
      result: [],
    };
  },
  components: {
    SongItem,
  },
  beforeRouteUpdate(to, from, next) {
    this.sendRequest(to.params);
  },
  methods: {
    sendRequest(params) {
      let word = params.word;
      if (word) {
        axios
          .get("/search", { params: { keywords: word, type: 1 } })
          .then((res) => {
            const songs = res.result.songs;
            this.count = songs.length;
            this.result = songs;
          });
      }
    },
  },
  created() {
    this.sendRequest(this.$route.params);
  },
};
</script>

<style lang="scss" scoped>
.search-result {
  .title {
    height: 6rem;
    padding: 2rem;
    font-weight: bold;
    font-size: 1.8rem;
  }
  .sorts {
    display: flex;
    .sort {
      margin: 0 2rem;
      cursor: pointer;
    }
    .sort.active {
      font-weight: bold;
    }
  }
  // .songs {
  //   .title {
  //     display: flex;
  //     padding-left: 4.5rem;
  //     .title-item {
  //       margin: 0 4rem;
  //     }
  //     .song-name {
  //       margin: 0 7rem;
  //     }
  //   }
  //   .song {
  //     display: flex;
  //     align-items: center;
  //     padding-left: 2rem;
  //     height: 4rem;
  //     cursor: pointer;
  //     &:hover {
  //       background: rgba(0, 0, 0, 0.2) !important;
  //     }
  //     .ico {
  //       margin: 0 1.5rem;
  //       margin-right: 5rem;
  //     }
  //     .song-name {
  //       width: 17.5rem;
  //     }
  //     .song-singer {
  //       width: 11rem;
  //     }
  //     .song-album {
  //       width: 11rem;
  //       margin-right: 1.5rem;
  //     }
  //     .song-time {
  //       width: 11rem;
  //     }
  //     .song-hot {
  //       width: 6rem;
  //       margin-left: 2rem;
  //     }
  //   }
  //   .song:nth-child(2n) {
  //     background: rgba(255, 255, 255, 0.1);
  //   }
  // }
}
</style>